<!--
 * @Date: 2022-11-21 15:10:42
 * @LastEditTime: 2023-02-02 14:02:44
 * @Description: content
-->
<template>
	<view class="page-wrap">
		<view class="page-wrap-bg">
			<view class="top-bg"></view>
		</view>
		<view class="user-info">
			<view class="user-left">
				<view class="avatar-container">
					<view class="avatar">
						
					</view>
				</view>
				<view class="user-text">
					<view class="user-name">
						<input type="text" v-model="userInfo.nickName" @blur="changeInfo(userInfo.nickName)" />
					</view>
					<view class="user-id">{{ userInfo.mobile }}</view>
				</view>
			</view>
			<view class="customer-service">
				<view class="service-icon">
					<img :src="userInfo.avatar || '/static/images/mine_kf.png'" style="width: 100%; height: 100%" alt="" />
				</view>
			</view>
		</view>

		<view class="currency-container">
			<view class="currency-box points">
				<view class="currency-header">
					<view class="currency-icon">
						<image src="/static/images/mine/mine_jf1.png" mode="aspectFit"></image>
					</view>
					<view class="currency-text">积分</view>
				</view>
				<view class="currency-value">{{ userInfo.coin }}</view>
			</view>
			<view class="currency-box coins">
				<view class="currency-header" @click="Tkubu">
					<view class="currency-icon">
						<image src="/static/images/mine/mine_b1.png" mode="aspectFit"></image>
					</view>
					<view class="currency-text">酷玩币</view>
				</view>
				<view class="currency-value">{{ userInfo.money }}</view>
			</view>
		</view>

		<view class="menu-container">
			<view class="menu-grid">
				<view class="menu-item" v-for="(item, index) in menuItems" :key="index" @click="handleMenuClick(item)">
					<view class="menu-icon-container">
						<view class="menu-icon" :class="item.class">
							<img :src="item.url" style="width: 100%; height: 100%" />
						</view>
					</view>
					<text class="menu-text">{{ item.text }}</text>
					<view class="arrow-icon" v-if="item.hasArrow">
						<img src="/static/images/mine_rj.png" alt="" />
					</view>
				</view>
			</view>
		</view>
		<custom-tabbar :current="3" @change="handleTabChange"></custom-tabbar>

		<!-- 协议弹窗组件 -->
		<agreement-popup ref="agreementPopup" :title="popupTitle" :contentHtml="popupContent"></agreement-popup>
	</view>
</template>

<script>
	import {
		login
	} from "../../api/mine.js";
	import {
		mapGetters
	} from "vuex";
	import AgreementPopup from "../../components/agreement-popup/agreement-popup.vue";
	import {
		usageAgreement,
		privacyAgreement,
		afterSaleRules
	} from "@/static/agreements/agreements.js";

	export default {
		components: {
			AgreementPopup
		},
		data() {
			return {
				popupTitle: "",
				popupContent: "",
				menuItems: [{
						text: "订单中心",
						class: "icon-order",
						hasArrow: true,
						url: "/static/images/mine_dd.png",
						navigateUrl: "/package/mine/mall-order",
						type: "navigate"
					},
					{
						text: "使用协议",
						class: "icon-agreement",
						hasArrow: true,
						url: "/static/images/mine_xy.png",
						type: "agreement",
						agreementType: "usage"
					},
					{
						text: "收货地址",
						class: "icon-address",
						hasArrow: true,
						url: "/static/images/mine_dz.png",
						navigateUrl: "/package/mine/address",
						type: "navigate"
					},
					{
						text: "隐私协议",
						class: "icon-privacy",
						hasArrow: true,
						url: "/static/images/mine_xiey.png",
						type: "agreement",
						agreementType: "privacy"
					},
					{
						text: "联系客服",
						class: "icon-contact",
						hasArrow: true,
						url: "/static/images/mine_kefu.png",
						type: "navigate",
						navigateUrl: "/package/mine/qrcode",
					},
					{
						text: "售后规则",
						class: "icon-after-sale",
						hasArrow: true,
						url: "/static/images/mine_gz.png",
						type: "agreement",
						agreementType: "afterSale"
					},
					{
						text: "退出登录",
						class: "icon-logout",
						hasArrow: true,
						url: "/static/images/mine_tc.png",
						type: "logout"
					},
				],
				argumentsdata: '',
				imageValue:[]
			};
		},

		computed: {
			...mapGetters(["userInfo"])
		},

		onShareAppMessage() {},

		onLoad(options) {},

		onShow() {
			this.$store.dispatch("getUserInfo");
		},

		methods: {
			// 获取上传状态
			select(e){
				console.log('选择文件：',e)
			},
			// 获取上传进度
			progress(e){
				console.log('上传进度：',e)
			},
			
			// 上传成功
			success(e){
				console.log('上传成功')
			},
			//酷币积分详情
			Tkubu() {
				uni.navigateTo(
				  {
					  url: '/package/mine/coldplayCoin'
				  }
				)
			},
			// 上传失败
			fail(e){
				console.log('上传失败：',e)
			},
			
			
			
			getAgreement(id) {
				this.req({
					url: "/v1/sysrule",
					data: {
						id: id
					},
					Loading: false,
					success: (res) => {
						if (res.code == 200) {
							this.popupTitle = res.data.title
							this.popupContent = res.data.editor
						}
					},
					complete: () => {
					
					},
				});
			},
			handleTabChange() {},

			handleMenuClick(item) {
				console.log('点击菜单项:', item.text);

				if (item.type === 'navigate' && item.navigateUrl) {
					console.log('跳转到:', item.navigateUrl);
					// 使用绝对路径跳转
					uni.navigateTo({
						url: item.navigateUrl,
						fail: (err) => {
							console.error('导航失败:', err);
							// 尝试降级使用switchTab
							uni.switchTab({
								url: item.navigateUrl,
								fail: (err2) => {
									console.error('switchTab也失败:', err2);
									uni.showToast({
										title: '页面跳转失败',
										icon: 'none'
									});
								}
							});
						}
					});
				} else if (item.type === 'agreement') {
					// 显示协议弹窗
					this.showAgreementPopup(item.agreementType);
				} else if (item.type === 'contact') {
					// 联系客服逻辑
					uni.showToast({
						title: '正在连接客服...',
						icon: 'none'
					});
					// 这里可以添加联系客服的具体逻辑
				} else if (item.type === "logout") {
					// 退出登录逻辑
					uni.showModal({
						title: '提示',
						content: '确认退出登录？',
						success: (res) => {
							if (res.confirm) {
								// Logout logic
								uni.clearStorageSync();
								uni.reLaunch({
									url: '/pages/login/login'
								});
							}
						}
					});
				}
			},

			// 显示协议弹窗
			showAgreementPopup(type) {
				switch (type) {
					case 'usage':
						this.getAgreement('7');
						this.popupTitle = '使用协议';
						this.popupContent = usageAgreement;
						break;
					case 'privacy':
						this.getAgreement('8');
						this.popupTitle = '隐私协议';
						this.popupContent = privacyAgreement;
						break;
					case 'afterSale':
						this.getAgreement('9');
						this.popupTitle = '售后规则';
						this.popupContent = afterSaleRules;
						break;
				}

				// 打开弹窗
				this.$refs.agreementPopup.open();
			},
			//上传头像
			uploadImg(){
				
			},
			//修改头像名称
			changeInfo(nickName,avatar) {
				this.req({
					url: "/v1/user/info/edit",
					data: {
						type: '2',
						nickName:nickName,
						avatar:''
					},
					Loading: false,
					success: (res) => {
						if (res.code == 200) {
							
						}
					},
					complete: () => {
					
					},
				});
			},
		},
	};
</script>

<style lang="scss">
	.page-wrap {
		background-color: #f8e6c3;
		min-height: 100vh;
		position: relative;
		padding: 20rpx;
	}

	.page-wrap-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 0;
	}

	.top-bg {
		height: 200rpx;
		background-color: #f8e6c3;
	}

	.user-info {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 10rpx;
		margin-bottom: 30rpx;
	}

	.user-left {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.avatar-container {
		position: relative;
		width: 150rpx;
		height: 150rpx;
		margin-right: 20rpx;
		background-image: url("/static/images/mine_h_bg.png");
		background-repeat: no-repeat;
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.avatar {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		background-color: #444;
		/* border: 4rpx solid #ddd; */
	}

	.flower-decoration {
		position: absolute;
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		background-color: #e57373;
	}

	.flower-left {
		top: 5rpx;
		left: -5rpx;
	}

	.flower-right {
		top: 5rpx;
		right: -5rpx;
	}

	.user-text {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.user-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
		text-shadow:
			0 0 2px #000,
			0 0 4px #000,
			0 2px 0 #000,
			2px 0 0 #000,
			0 -2px 0 #000,
			-2px 0 0 #000,
			2px 2px 0 #000,
			-2px -2px 0 #000,
			2px -2px 0 #000,
			-2px 2px 0 #000;
	}

	.user-id {
		font-size: 28rpx;
		color: #666;
		margin-top: 5rpx;
	}

	.customer-service {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #fff;
		padding: 5rpx 15rpx;
	}

	.service-icon {
		width: 92rpx;
		height: 110rpx;
	}

	.currency-container {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}

	.currency-box {
		height: 172rpx;
		width: 48%;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.currency-header {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.points {
		background-image: url('/static/images/mine/mine_jf.png');
		background-size: cover;
		background-position: center;
	}

	.coins {
		background-color: #5b9bd5;
		background-image: url('/static/images/mine/mine_b.png');
		background-size: cover;
		background-position: center;
	}

	.currency-icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 8rpx;
	}

	.currency-text {
		font-size: 28rpx;
		color: #fff;
		font-weight: 500;
	}

	.currency-value {
		font-size: 40rpx;
		font-weight: bold;
		color: #fff;
	}

	.menu-container {
		background-color: transparent;
		padding: 0 5rpx;
	}

	.menu-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.menu-item {
		width: 48%;
		height: 104rpx;
		display: flex;
		align-items: center;
		padding: 0 15rpx;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		background-color: #f8dba7;
		position: relative;
		background: #f0dbb0;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 4rpx solid #1d1d1d;
	}

	.menu-icon-container {
		width: 86rpx;
		height: 86rpx;
		border-radius: 8rpx;
		background-color: #ffa726;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 15rpx;
		border: 4rpx solid #1d1d1d;
	}

	.menu-icon {
		width: 57rpx;
		height: 57rpx;
	}
	.icon-order {
		
	}
	.menu-text {
		font-size: 28rpx;
		color: #333;
		flex: 1;
	}

	.arrow-icon {
		width: 40rpx;
		height: 40rpx;

		img {
			width: 100%;
			height: 1005;
		}
	}
</style>